<template>
  <div id="viewerContainer"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useCesium } from "../composables";

const { initViewer } = useCesium("viewerContainer");
import * as Cesium from "cesium";

let viewer: Cesium.Viewer;

onMounted(() => {
  viewer = initViewer();
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(120, 30.5, 500000),
    duration: 0,
  });

  // 定义梯形的四个顶点
  const positions = Cesium.Cartesian3.fromDegreesArrayHeights([
    119.0,
    30.0,
    0.0, // 左下角
    121.0,
    30.0,
    0.0, // 右下角
    120.5,
    31.0,
    0.0, // 右上角
    119.5,
    31.0,
    0.0, // 左上角
  ]);

  const material = new Cesium.Material({
    fabric: {
      type: "Image", // 材质类型为图片
      uniforms: {
        image: "/_20250227140009.png", // 图片路径
      },
      //   source: `
      //           // 顶点着色器
      //           varying vec2 v_textureCoordinates;
      //           void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
      //             v_textureCoordinates = vsInput.attributes.texCoord_0; // 获取纹理坐标
      //           }

      //           // 片元着色器
      //           varying vec2 v_textureCoordinates;
      //           void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
      //             vec4 color = texture2D(image, v_textureCoordinates); // 根据纹理坐标采样颜色
      //             material.diffuse = color.rgb;
      //             material.alpha = color.a;
      //           }
      //         `,
    },
  });

  const layer = new Cesium.PrimitiveCollection();
  viewer.scene.primitives.add(layer);

  const primitive = new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: new Cesium.PolygonGeometry({
        polygonHierarchy: new Cesium.PolygonHierarchy(positions),
      }),
    }),
    appearance: new Cesium.MaterialAppearance({
      material,
    }),
  });

  layer.add(primitive);
});
</script>

<style scoped lang="less">
#viewerContainer {
  height: 100vh;
}
</style>
